import React from "react";
import { Card, Row, Col, Button, message } from "antd";
import "./index.less";

interface IProp {}

interface IState {}

class UIMessage extends React.Component<IProp, IState> {
	constructor(props: IProp, state: IState) {
		super(props, state);
		this.state = {};
	}

	showMessage = (type: string) => {
		let content = <div>{type}</div>;
		let onClose = () => {};

		switch (type) {
			case "success":
				message.success(content, onClose);
				break;
			case "error":
				message.error(content, onClose);
				break;
			case "info":
				message.info(content, onClose);
				break;
			case "warning":
				message.warning(content, onClose);
				break;
			case "warn":
				message.warn(content, onClose);
				break;
			case "loading":
				message.loading(content, onClose);
				break;
			default:
				break;
		}
	};

	render() {
		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>UI Message</h1>
				</div>
				<Card title="基本消息通知" className="button-wrap">
					<Row>
						<Col span={12}>
							<Button onClick={() => this.showMessage("success")}>success</Button>
							<Button onClick={() => this.showMessage("error")}>error</Button>
							<Button onClick={() => this.showMessage("info")}>info</Button>
							<Button onClick={() => this.showMessage("warning")}>warning</Button>
							<Button onClick={() => this.showMessage("warn")}>warn</Button>
							<Button onClick={() => this.showMessage("loading")}>loading</Button>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default UIMessage;
